<template>
  <div class="min-h-screen bg-pink-gradient p-6">
    <div class="max-w-7xl mx-auto">
      <!-- 头部 -->
      <div class="glass-effect rounded-3xl p-6 mb-6 shadow-pink-md">
        <div class="flex items-center justify-between">
          <div>
            <h1 class="text-3xl font-bold text-pink-600">
              欢迎回来，{{ userInfo?.display_name }} 💖
            </h1>
            <p class="text-pink-400 mt-2">今天也要开心哦~</p>
          </div>
          <n-button type="error" @click="handleLogout" class="rounded-xl">
            退出登录
          </n-button>
        </div>
      </div>

      <!-- 主要内容区域 -->
      <div class="glass-effect rounded-3xl p-8 shadow-pink-md">
        <div class="text-center">
          <h2 class="text-2xl font-bold text-pink-500 mb-4">🎉 登录成功！</h2>
          <p class="text-gray-600 mb-6">
            这里是我们的小窝首页，后续功能敬请期待~
          </p>

          <!-- 用户信息卡片 -->
          <div class="bg-white/50 rounded-2xl p-6 max-w-md mx-auto">
            <div class="text-left space-y-2">
              <p class="text-gray-700">
                <span class="font-semibold text-pink-600">用户ID:</span>
                {{ userInfo?.id }}
              </p>
              <p class="text-gray-700">
                <span class="font-semibold text-pink-600">用户名:</span>
                {{ userInfo?.username }}
              </p>
              <p class="text-gray-700">
                <span class="font-semibold text-pink-600">昵称:</span>
                {{ userInfo?.display_name }}
              </p>
              <p class="text-gray-700 text-xs mt-4">
                <span class="font-semibold text-pink-600">注册时间:</span>
                {{ userInfo?.created_at }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const message = useMessage()
const authStore = useAuthStore()

const userInfo = computed(() => authStore.userInfo)

// 退出登录
const handleLogout = () => {
  authStore.logout()
  message.success('已退出登录')
  router.push({ name: 'login' })
}
</script>
